<template>
	<div class="InformationContent wrapper" >
		<el-form :rules="userRules" label-width="120px" :model="userForm" ref="userForm">
			<div class="title">基本信息</div>
			<el-form-item label="账号：">
			    {{userForm.account}}
			</el-form-item>
			<el-form-item label="用户名：">
			    {{userForm.userName}}
			</el-form-item>
			<el-form-item label="性别：">
			    {{userForm.gender}}
			</el-form-item>
			<el-form-item label="出生日期：">
			    {{userForm.birthDate | dateFormatter}}
			</el-form-item>
			<el-form-item label="照片：">
				<img width="120" height="auto" :src="userForm.photo">
			</el-form-item>
			<div class="title">业务信息</div>
			<el-form-item label="所属部门：">
			    {{userForm.department}}
			</el-form-item>
			<el-form-item label="岗位：">
			    {{userForm.post}}
			</el-form-item>
			<div class="title">联系信息</div>
			<el-form-item class="itemClass" label="手机：" prop="phoneNumber">
			    <el-input v-model="userForm.phoneNumber"></el-input>
			</el-form-item>
			<el-form-item class="itemClass" label="邮箱：" prop="email">
			    <el-input v-model="userForm.email"></el-input>
			</el-form-item>
			<el-form-item class="itemClass" label="QQ：" prop="QQNumber">
			    <el-input v-model="userForm.QQNumber"></el-input>
			</el-form-item>
			<el-form-item class="itemClass" label="简介：" prop="Introduction">
			    <el-input type="textarea" v-model="userForm.Introduction"></el-input>
			</el-form-item>
			<el-form-item class="itemClass">
			    <el-button  type="primary" @click="submitForm('userForm')">保存</el-button>
                <el-button  @click="resetForm('userForm')">取消</el-button>
			</el-form-item>
		</el-form>
	</div>
	
</template>

<script>
	import Vue from 'vue'
	import axios from '~/plugins/axios';
  	import {Form,FormItem,Input,Button,Message } from 'element-ui'
  	import * as types from '../../store/mutation-types/user_login/index';
    import {getDate} from '~/utils/auth'
    import {mapGetters} from 'vuex';
  	
  	Vue.use(Form);
  	Vue.use(FormItem)
  	Vue.use(Input)
  	Vue.use(Button)
  	
  	Vue.prototype.$message = Message;
  	export default {
	    components: {
	      	
	    },
	    head(){
            return {
                title: "CRM-个人信息"
            }
        },
	    data () {
	    	var validatePhoneNumber = (rule, value, callback) => {
		        var regPhone = /^1[34578]\d{9}$/
		        if (value === '') {
		        	callback(new Error('请输入手机号码'));
		        }else if(!regPhone.test(value)) {
                    callback(new Error('请输入正确的手机号码'))
                }else{
                	callback()
                }
		      };
	    	var validateEmail = (rule,value,callback) => {
                var regEmail = /^[_\.0-9a-z-]+@([0-9a-z][0-9a-z-]+\.){1,4}[a-z]{2,3}$/
                if (value != '' && !regEmail.test(value)) {
                    callback(new Error('请输入正确的邮箱地址'))
                }else{
                	callback()
                }
            };
	    	var validateQQ = (rule,value,callback) => {
                var regQQ = /^\d{5,10}$/
                if (value != '' && !regQQ.test(value)) {
                    callback(new Error('请输入正确的QQ'))
                }else{
                	callback()
                }
            };
	    	
	      return {
	      	userForm: {
	      		account:'',
		        userName:'',
		        gender:'',
		        birthDate:'',
		        photo:'',
		        department:'',
		        post:'',
		        phoneNumber:'',
		        email:'',
		        QQNumber:'',
		        Introduction:'',
		        id:'',
		        departmentId:'',
		        jobId:''
	      	},
	      	
	        userRules:{
	         	phoneNumber:[
	         		{required: true, validator: validatePhoneNumber, trigger: 'blur'}
	         	],
	         	email:[
	         		{validator: validateEmail, trigger: 'blur'}
	         	],
	         	QQNumber:[
	         		{validator: validateQQ, trigger: 'blur'}
	         	]
	         }
	         
	         
	      }
	    },
	    mounted(){
	    	this.getInformation()
	    },
        filters: {
            dateFormatter(val) {
                return val ? getDate(new Date(val),false) : ''
            }
        },
	    methods: {
	       getInformation(){
	       		this.$store.dispatch('getUserPersonalData')
                    .then((response) =>{
                    	if(!response){return}
                        if(response.data.code == 0){
                            let result = response.data;
                            if (result.data) {
                                //pageTab
								if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
									let arr = this.pageTabsList;
									arr[arr.length-1].name = result.data.name;
									this.$store.commit('PAGETABSLIST',{data:arr})
								}
                            	this.userForm.account=result.data.account
                            	this.userForm.userName=result.data.name
                            	this.userForm.gender=result.data.sex
                            	this.userForm.birthDate=result.data.birthday
                            	this.userForm.photo=result.data.userAvatar
                            	this.userForm.department=result.data.departmentName
                            	this.userForm.post=result.data.position
                            	this.userForm.phoneNumber=result.data.phone
                            	this.userForm.email=result.data.email
                            	this.userForm.QQNumber=result.data.qq
                            	this.userForm.Introduction=result.data.remark
                            	this.userForm.id=result.data.id
                            	this.userForm.departmentId=result.data.departmentId
                            	this.userForm.jobId=result.data.jobId
                            }
                        }
                    });
                    
	       },
	       
	       submitForm(formName) {
				this.$refs[formName].validate((valid) => {
			          if (valid) {
			          	var info={
			       			"id":this.userForm.id,
			       			"account":this.userForm.account,
			       			"name":this.userForm.userName,
			       			"sex":this.userForm.gender,
			       			"departmentName":this.userForm.department,
			       			"position":this.userForm.post,
			       			"phone":this.userForm.phoneNumber,
			       			"email":this.userForm.email,
			       			"qq":this.userForm.QQNumber,
			       			"remark":this.userForm.Introduction,
			       			"departmentId":this.userForm.departmentId,
			       			"jobId":this.userForm.jobId
			       		}
			            this.$store.dispatch('editUserData',info)
							.then((response) => {
								if(!response){return}
								this.$message({
							          message: '保存成功',
							          type: 'success'
						        });
						})
						
			          } else {
			            this.$message.error({
					          message: '保存失败'
				        });
			            return false;
			          }
		        });
		    },
	       	resetForm(formName){
	       		location.reload()
	       	}
	  
	    },
	    computed: {
            ...mapGetters({
                'pageTabsList': 'getPageTabsList'
            })
	    },
	    created() {

	    }
  	}
  	
  	
  	
  	
</script>

<style lang="scss">
	.InformationContent{
		border: 1px solid #dfe6ec;
		width: 400px;
		.el-form-item{
			margin-bottom: 0px;
		}
		.itemClass{
			margin-bottom: 20px;
		}
		.el-button{
			margin-right:50px;
		}
		.el-input,.el-textarea{
			width: 200px;
		}
		.title{
			margin: 10px;
			font-size: 14px;
			font-weight: 600;
		}
	}
	
</style>